<template>
  <div id="signUp">
		<van-nav-bar
			title="注册"
			left-text="返回"
			left-arrow
			fixed
			@click-left="$router.go(-1)"

		/>
		
		<van-form @submit="onSignUp">
			<van-field
				v-model="fieldValue"
				is-link
				readonly
				label="选择身份"
				placeholder="请选择身份"
				@click="onClickChangeUserType"
				:rules="[{ required: true, message: '请选择您的身份' }]"
			/>
			<van-popup v-model="show" round position="bottom">
				<van-cascader
					v-model="cascaderValue"
					title="请选择您的身份"
					:options="options"
					@close="show = false"
					@finish="onFinish"
					:field-names="fieldNames"
				/>
			</van-popup>
			<userInfo ref="userRef" :passportType="passportType"></userInfo>

			
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">注册</van-button>
			</div>
		</van-form>
     
		
		
		
		
		
  </div>
</template>

<script>
import { Toast } from 'vant';
import userInfo from '@/components/userInfo.vue';
import { register, viewRole} from '../../api/register.js';

export default {
	
  name: 'signUp',
  components: {
    userInfo
  },
	data() {
			return {
				
				phone: '', // 快速注册时输入的手机号
				// name: '',	//  普通注册时输入的用户名	
				passportType: 'signUp',
				show: false, // 身份选择用
				fieldValue: '',// 身份选择用 
				cascaderValue: '', // 身份选择用
				fieldNames: {
					text: 'note',
					value: 'id',					
				},
				options: [
					// {
					// 	text: '教师',
					// 	value: 2,
					// },
					// {
					// 	text: '学生',
					// 	value: 3,
					// },
				],
				SignUpType: 0, // 0: 正常注册   1: 快速注册
				sms: '',  //   用户输入的验证码
				// pattern: /\d{6}/,  // 手机号的正则表达式
				verifyCodeMsg : '获取验证码',  // 获取验证码button展示的文字，点击后会发生改变
				btnable : false,  // 按键使能
			};
		},
	methods: {		
		
		onClickChangeUserType() {
			this.show = true;

			viewRole().then(res => {
				console.log(res);
				if( res.data.code === 0) { // 注册成功
					this.options = [];
					for(let opt of res.data.data) {
						this.options.push(opt);
					}
					//this.options = res.data.data;
					console.log(this.options)
				} else {
					Toast(res.data.msg);
				}
			}).catch(err => console.log(err));
		},

		
		// 全部选项选择完毕后，会触发 finish 事件
		onFinish({ selectedOptions }) {
			this.show = false;
			this.fieldValue = selectedOptions.map((option) => option.note).join('/');
			console.log(this.fieldValue);
			console.log(this.cascaderValue);
		},
		onSignUp() {// 按了注册按钮
			if(this.SignUpType) {
				this.quickSignUp();
			} else {
				this.normalSignUp();
			}
		},
		normalSignUp() { // 正常注册
			if(this.$refs.userRef.password === this.$refs.userRef.ppassword) {
				const info = {
					"code": this.$refs.userRef.sms,
					// "nickname": this.name,  // 昵称
					"password": this.$refs.userRef.password,				
					"phone": this.$refs.userRef.username,  // 手机号
					"roleId": this.cascaderValue
				}
			
				register(info).then(res => {
					console.log(res);
					if( res.data.code === 0) { // 注册成功
						Toast('注册成功');
						this.$router.push({name: "login"});
					} else if(res.data.code === 1004){
						Toast('验证码错误,注册失败');
					} else if(res.data.code === 1002){
						Toast('您还未获取验证码');
					} else {
						Toast(res.data.msg);
					}
				});
			} else {
				Toast('您输入的两次密码不一致');
			}
			
		},
		
	}
}
</script>

<style>

</style>
